﻿
@{
    ViewData["Title"] = "MenuShow";
    Layout = "~/Views/Home/Main.cshtml";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2>菜单显示</h2>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">

</head>
<body>
    <div id="ID-tree-demo-showCheckbox" style=" float: left; width: 30%;"></div>
    <form class="layui-form layui-form-pane" action="" style=" float: left; width: 50%; ">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select id="RoleId" lay-filter="aihao">
                    <option value="0">/</option>
                </select>
            </div>
        </div>
        <div>
            <button type="button" id="addFunction" class="layui-btn" onclick="AddMunRole()">提交</button>
        </div>
    </form>
    <script>
                 layui.use(["form"],function () {
                    var tree = layui.tree;
                    var form = layui.form;
                    var layer = layui.layer;
                    var util = layui.util;
            var data = [];
            var menuId = [];
            var token = localStorage.getItem("token")
                $.ajax({
                    url: '../User/MenuTree',
                    type: 'get',
                    data: { token: token },
                    //contentType: 'application/json',
                    success: function (res) {
                        var res = JSON.parse(res)
                        data = res.data
                        tree.render({
                            elem: '#ID-tree-demo-showCheckbox',
                            data: data,
                            showCheckbox: true,
                            edit: ['add', 'update', 'del'] ,// 开启节点的右侧操作图标
                            oncheck:function(obj){
                            menuId.push(obj.data.value);
                            console.log(menuId); // 打印所有选中节点的id
                          window.AddMunRole = function AddMunRole() {
            var model = JSON.stringify({
                menuId:menuId
            })
            var token = localStorage.getItem("token")
            $.ajax({
                url: '../User/MenuRoleDo',
                type: 'post',
                data: { model:model,token: token },
                async: false,
                //contentType: 'application/json',
                success: function (res) {
                    var res = JSON.parse(res)
                   if(res.data==200)
                   {
                       alert("添加成功")
                   }
                   else{
                       alert("添加失败")
                   }
                }
            })
        }
                            }
                });


                },
                error: function (err) {
                    // 添加错误处理，这里可以弹出一个提示框告知用户获取数据出错
                    layer.msg('获取菜单树数据出错：' + err.statusText, { icon: 5, time: 3000 });
                }
            });
               window.RoleBang = function MeunBang() {
                var token = localStorage.getItem("token")
                $.ajax({
                    url: '../User/RoleBang',
                    type: 'get',
                    data: { token: token },
                    async: false,
                    //contentType: 'application/json',
                    success: function (res) {
                        var res = JSON.parse(res)
                        console.log(res)
                        var count = `<option value="0">/</option>`
                        $.each(res.data, function () {
                            count += `<option value="${this.id}">${this.name}</option>`
                        })

                        $("#RoleId").html(count)
                        form.render();
                        console.log($("#RoleId"))
                    }
                })
            }
            $(function(){
                RoleBang();
            })

                });



    </script>
</body>
</html>